﻿<br />
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="panel panel-primary">
            <div class="panel-heading" style="text-align:center; font-weight:700; font-size:large; padding-bottom: 0px;"><p>Albums</p></div>
            <div class="panel-body">
                <div class="form-inline" ng-controller="ngAddAlbumController">
                    <input type="text" class="form-control" placeholder="Enter Title" data-ng-model="album.Title">
                    <input type="text" class="form-control" placeholder="Enter Artist" data-ng-model="album.Artist">
                    <input type="text" class="form-control" placeholder="Enter Image" data-ng-model="album.Image">
                    <textarea name="description" data-ng-model="album.Description" class="form-control" placeholder="Description"></textarea>
                    <button type="button" class="btn btn-success" data-ng-click="addAlbum(album)"><span class="glyphicon glyphicon-plus"></span></button>
                </div><br />
                <table class="table table-condensed table-striped table-responsive table-hover">
                    <tr><th></th><th>Title</th><th>Artist</th><th></th></tr>
                    <tr data-ng-repeat="album in album">
                        <td><img style="height:50px; width:50px;" class="img-responsive img-thumbnail" data-ng-src="{{album.Image}}" /></td>
                        <td>{{album.Title}}</td>
                        <td>{{album.Artist}}</td>
                        <td><button data-ng-click="showDetails(album)" class="btn btn-primary btn-sm btn-block" style="width:75%; margin-left:41px">View This Album</button><br /></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
</div><br />
<div class="row">
    <div data-ng-repeat="album in album">
        <div data-ng-show="album.showAlbumDetails">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div class="panel panel-primary albumdetails">
                    <div class="panel-heading" style="text-align:center; font-weight:700; font-size:large; padding-bottom: 0px;"><p>Album Details</p></div>
                    <div class="panel-body">
                        <img data-ng-src="{{album.Image}}" class="img-thumbnail img-responsive center-block pull-left" style="height:400px; width:400px; display:block; margin:auto;" />
                        <p style="font-weight:700; font-size:25px;text-align:center">{{album.Title}} <br />By: {{album.Artist}}</p>
                        <p style="font-weight:500; font-size:20px;text-align:center">{{album.Description}}</p><br />
                        <table class="table table-condensed table-striped table-responsive table-hover">
                            <tr><td style="font-weight:700; font-size:20px;text-align:center">Song List</td><td></td></tr>
                            <tr data-ng-repeat="song in song">
                                <td>{{song.Title}}</td>
                                <td><button data-ng-click="showSongDetails(song)" class="btn btn-primary btn-sm btn-block" style="width:75%; margin-left:41px">View Song</button><br /></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div data-ng-repeat="song in song">
        <div data-ng-show="song.showSongDetail">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div class="panel panel-primary songdetails">
                    <div class="panel-heading" style="text-align:center; font-weight:700; font-size:large; padding-bottom: 0px;"><p>Song Details</p></div>
                    <div class="panel-body">
                        <p style="font-weight:700; font-size:25px;text-align:center">{{song.Title}}</p>
                        <p style="font-weight:500; font-size:20px;text-align:center">Featured Artists: {{song.FeaturedArtist}}<br />Genres:{{song.Genre}}</p><br />
                        <iframe style="margin-left:135px;" width="640" height="360" data-ng-src="//www.youtube.com/embed/{{song.YoutubeUrl}}" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</div>
